<template>
  <div
    v-infinite-scroll="loadMore"
    class="app"
    style="height: 1200px;background-color: #ccc;width: 400px;margin: 0 auto;"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="10"
  />
</template>

<script>
export default {

}
</script>

<style>

</style>

<script>
export default {
  data() {
    return {
      busy: false,
      data:[1,2,3],
    }
  },
  methods:{
    loadMore() {
      this.busy = true
      var self = this;
      console.log('loading... ' + new Date());
      setTimeout(function () {
        var app = document.querySelector('.app')
        var height = app.clientHeight;
        app.style.height = height + 300 + 'px';
        console.log('end... ' + new Date());
        this.busy = false
      }, 1000)
    }
  }
}
</script>

<style>

</style>
